<template>
  <basic-container
    page-title="系统配置"
    custom-content="px-0 rounded-b-none"
    transparent
  >
    <template #header>
      <el-tabs
        v-model="active"
        class="basic-tabs"
        @tab-change="handleTableChange"
      >
        <el-tab-pane name="SystemSetupFunction" label="功能设置"></el-tab-pane>
        <el-tab-pane name="SystemSetupRegister" label="注册方式"></el-tab-pane>
      </el-tabs>
    </template>

    <router-view></router-view>
  </basic-container>
</template>

<script setup lang="ts">
import type { TabPaneName } from 'element-plus'

import { BasicContainer } from '@/components/application'

const active = ref<string>()
const route = useRoute()
const router = useRouter()

const handleTableChange = (name: TabPaneName) => {
  router.replace({ name: String(name) })
}

watchEffect(() => {
  active.value = String(route.name)
})
</script>

<style scoped lang="scss"></style>
